<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
  </head>
  <body>
    <div class="box">111</div>
    <button>点击我移除类名</button>
    <button>是否包含active类名</button>
    <button>类名切换</button>
    <script>
      // 1.className 2.classList
      // jq操作类名
      // 一、添加类名
      $(".box").click(function () {
        $(this).addClass("active");
      });

      // 二、移除类名
      $("button:eq(0)").click(function () {
        $(".box").removeClass("active");
      });

      // 三、是否包含某个类名
      $("button:eq(1)").click(function () {
        var res = $(".box").hasClass("active");
        console.log(res);
      });

      // 四、类名的切换 ：如果有这个类名 那么就移除 ，如果没有这个类名就添加
      $("button:eq(2)").click(function () {
        $(".box").toggleClass("active");
      });
    </script>
  </body>
</html>
